<template>
  <div class="base-table">
    <el-table
      ref="table"
      :data="data"
      :border="border"
      :stripe="stripe"
      :height="height"
      :max-height="maxHeight"
      :loading="loading"
      :row-key="rowKey"
      v-bind="$attrs"
      @selection-change="e=> $emit('selection-change', e)"
      @sort-change="e=> $emit('sort-change', e)"
      @row-click="e=> $emit('row-click', e)"
      @header-dragend="onHeaderDragEnd"
    >
      <el-table-column v-if="selection" type="selection" :selectable="selectable" width="50" />
      <el-table-column v-if="index" type="index" :index="indexMethod" width="60" />

      <el-table-column
        v-for="(col, i) in columns"
        :key="col.prop || col.label || i"
        :prop="col.prop"
        :label="col.label"
        :fixed="col.fixed"
        :align="col.align || 'left'"
        :sortable="col.sortable || false"
        :show-overflow-tooltip="col.showOverflowTooltip !== false"
        :width="computeWidth(col)"
        :min-width="col.minWidth"
      >
        <template v-slot="scope">
          <slot v-if="col.slot" :name="col.slot" v-bind="scope" :col="col">
            {{ scope.row[col.prop] }}
          </slot>
          <template v-else>
            {{ col.formatter ? col.formatter(scope.row, col, scope.row[col.prop], scope.$index) : scope.row[col.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="pager" class="base-table__pager">
      <el-pagination
        background
        :layout="pagerLayout"
        :current-page="pager.page"
        :page-size="pager.pageSize"
        :total="pager.total"
        :page-sizes="pageSizes"
        @current-change="onPageChange"
        @size-change="onSizeChange"
      />
    </div>
  </div>
</template>

<script>
// import tableWidthMixin from '@/mixin/tableWidth'; // 可选：列宽持久化

export default {
  name: 'BaseTable',
  inheritAttrs: false,
//   mixins: [tableWidthMixin], // 提供 colWidth/setColWidth/load/save
  props: {
    data: { type: Array, default: () => [] },
    columns: { type: Array, required: true }, // [{prop,label,width?,minWidth?,fixed?,sortable?,align?,slot?,formatter?}]
    loading: { type: Boolean, default: false },
    border: { type: Boolean, default: true },
    stripe: { type: Boolean, default: false },
    height: [String, Number],
    maxHeight: [String, Number],
    rowKey: [String, Function],
    // 选择/序号列
    selection: { type: Boolean, default: false },
    selectable: { type: Function },
    index: { type: Boolean, default: false },
    indexMethod: { type: [Number, Function] },
    // 分页
    pager: { type: Object, default: null }, // { page, pageSize, total }
    pagerLayout: { type: String, default: 'total, sizes, prev, pager, next, jumper' },
    pageSizes: { type: Array, default: () => [10, 20, 50, 100] }
  },
  methods: {
    computeWidth(col) {
      if (col.width) return col.width;
      // 使用 mixin 的持久化列宽（基于 prop）
      return col.prop ? this.colWidth(col.prop, col.minWidth || this.defaultColWidth) : col.minWidth;
    },
    onHeaderDragEnd(newW, oldW, column) {
      if (column && column.property) this.setColWidth(column.property, newW);
      this.$emit('header-dragend', { newW, oldW, column });
      this.$nextTick(() => this.$refs.table && this.$refs.table.doLayout());
    },
    onPageChange(p) {
      if (!this.pager) return;
      this.$emit('update:pager', { ...this.pager, page: p });
      this.$emit('page-change', p);
    },
    onSizeChange(s) {
      if (!this.pager) return;
      this.$emit('update:pager', { ...this.pager, pageSize: s, page: 1 });
      this.$emit('size-change', s);
    },
    refreshLayout() { this.$nextTick(() => this.$refs.table && this.$refs.table.doLayout()); },
    getTableRef() { return this.$refs.table; }
  },
  mounted() {
    // 为该表生成独立存储 key（可自定义覆盖）
    if (!this.tableWidthStorageKey) {
      const name = this.$options.name || 'BaseTable';
      const route = (this.$route && this.$route.path) || location.pathname || '';
      this.tableWidthStorageKey = `${route}:${name}:colwidths`;
    }
    this.loadColWidths();
  }
};
</script>

<style scoped>
.base-table { width: 100%; }
.base-table__pager { margin-top: 10px; text-align: right; }
</style>